<template>
  <div class="location-page">
    <baidu-map
      v-if="pageflag"
      class="location-map"
      :scroll-wheel-zoom="true"
      :zoom="zoom"
      @ready="handler"
    >
      <bm-view style="width: 100%; height: 100px; flex: 1"></bm-view>
      <div v-if="markers.length > 0">
        <bm-marker
          :icon="{ url: positionImg, size: { width: 51, height: 51 } }"
          v-for="(item, index) in markers"
          :key="index"
          :position="item.point"
          :dragging="false"
          @click="openinformation(this, item)"
        >
          <!-- '#ff747a' -->
          <bm-label
            :content="item.name"
            :labelStyle="{
              fontSize: '16px',
              fontWeight: 500,
              background: 'transparent',
              border: 'none',
              color: '#2DC4BB',
            }"
            :offset="{ width: -35, height: 50 }"
          />
          <bm-info-window
            :show="item.infoWindowShow"
            @close="closeinformation(this, item)"
          >
            <div class="info-window">
              <div class="top">
                <div class="display-flex ai-center">
                  <div class="enter">{{ company }}</div>
                  <div class="type">{{ ruleForm.scaleName }}型企业</div>
                </div>
              </div>
            </div>
          </bm-info-window>
        </bm-marker>
      </div>
    </baidu-map>
    <Reacquire v-else @onclick="getMarkers" style="line-height: 200px">
      重新获取
    </Reacquire>
    <drawerBmInfo ref="drawerBmInfoRef"></drawerBmInfo>
  </div>
</template>
<script>
import positionImg from "@/assets/images/position2.png";
import drawerBmInfo from "./drawer-bm-info/index.vue";
export default {
  name: "location-page",
  components: {
    drawerBmInfo,
  },
  props: {},
  data() {
    return {
      styleJson: [
        {
          featureType: "land",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            color: "#091220ff",
          },
        },
        {
          featureType: "water",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            color: "#113549ff",
          },
        },
        {
          featureType: "green",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            color: "#0e1b30ff",
          },
        },
        {
          featureType: "building",
          elementType: "geometry",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "building",
          elementType: "geometry.topfill",
          stylers: {
            color: "#113549ff",
          },
        },
        {
          featureType: "building",
          elementType: "geometry.sidefill",
          stylers: {
            color: "#143e56ff",
          },
        },
        {
          featureType: "building",
          elementType: "geometry.stroke",
          stylers: {
            color: "#dadada00",
          },
        },
        {
          featureType: "subwaystation",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            color: "#113549B2",
          },
        },
        {
          featureType: "education",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            color: "#12223dff",
          },
        },
        {
          featureType: "medical",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            color: "#12223dff",
          },
        },
        {
          featureType: "scenicspots",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            color: "#12223dff",
          },
        },
        {
          featureType: "highway",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            weight: "4",
          },
        },
        {
          featureType: "highway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "highway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#fed66900",
          },
        },
        {
          featureType: "highway",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "highway",
          elementType: "labels.text.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "highway",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "highway",
          elementType: "labels.icon",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "arterial",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            weight: "2",
          },
        },
        {
          featureType: "arterial",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "arterial",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffeebb00",
          },
        },
        {
          featureType: "arterial",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "arterial",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "arterial",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "local",
          elementType: "geometry",
          stylers: {
            visibility: "on",
            weight: "1",
          },
        },
        {
          featureType: "local",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "local",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "local",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "local",
          elementType: "labels.text.fill",
          stylers: {
            color: "#979c9aff",
          },
        },
        {
          featureType: "local",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffffff",
          },
        },
        {
          featureType: "railway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "subway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            weight: "1",
          },
        },
        {
          featureType: "subway",
          elementType: "geometry.fill",
          stylers: {
            color: "#d8d8d8ff",
          },
        },
        {
          featureType: "subway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "subway",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "subway",
          elementType: "labels.text.fill",
          stylers: {
            color: "#979c9aff",
          },
        },
        {
          featureType: "subway",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffffff",
          },
        },
        {
          featureType: "continent",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "continent",
          elementType: "labels.icon",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "continent",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "continent",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "city",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "city",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "city",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "city",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "town",
          elementType: "labels.icon",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "town",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "town",
          elementType: "labels.text.fill",
          stylers: {
            color: "#454d50ff",
          },
        },
        {
          featureType: "town",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffffff",
          },
        },
        {
          featureType: "road",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "poilabel",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "districtlabel",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "road",
          elementType: "geometry",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "road",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "road",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "district",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "poilabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "poilabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "poilabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "manmade",
          elementType: "geometry",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "districtlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffffff",
          },
        },
        {
          featureType: "entertainment",
          elementType: "geometry",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "shopping",
          elementType: "geometry",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "nationalway",
          stylers: {
            level: "6",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          stylers: {
            level: "7",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          stylers: {
            level: "8",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          stylers: {
            level: "9",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          stylers: {
            level: "10",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "6",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "7",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "8",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "9",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "10",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "6",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "7",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "8",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "9",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "nationalway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "10",
            curZoomRegionId: "0",
            curZoomRegion: "6-10",
          },
        },
        {
          featureType: "cityhighway",
          stylers: {
            level: "6",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          stylers: {
            level: "7",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          stylers: {
            level: "8",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          stylers: {
            level: "9",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "6",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "7",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "8",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "geometry",
          stylers: {
            visibility: "off",
            level: "9",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "6",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "7",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "8",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "labels",
          stylers: {
            visibility: "off",
            level: "9",
            curZoomRegionId: "0",
            curZoomRegion: "6-9",
          },
        },
        {
          featureType: "subwaylabel",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "subwaylabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "tertiarywaysign",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "tertiarywaysign",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "provincialwaysign",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "provincialwaysign",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "nationalwaysign",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "nationalwaysign",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "highwaysign",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "highwaysign",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "village",
          elementType: "labels",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "district",
          elementType: "labels.text",
          stylers: {
            fontsize: "20",
          },
        },
        {
          featureType: "district",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "district",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "country",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "country",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "water",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "water",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "tertiaryway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "tertiaryway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff10",
          },
        },
        {
          featureType: "provincialway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "provincialway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "nationalway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "nationalway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "highway",
          elementType: "labels.text",
          stylers: {
            fontsize: "20",
          },
        },
        {
          featureType: "nationalway",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "nationalway",
          elementType: "labels.text.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "nationalway",
          elementType: "labels.text",
          stylers: {
            fontsize: "20",
          },
        },
        {
          featureType: "provincialway",
          elementType: "labels.text.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "provincialway",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "provincialway",
          elementType: "labels.text",
          stylers: {
            fontsize: "20",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "labels.text.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "labels.text",
          stylers: {
            fontsize: "20",
          },
        },
        {
          featureType: "cityhighway",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "estate",
          elementType: "geometry",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "tertiaryway",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "tertiaryway",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "fourlevelway",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "fourlevelway",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "scenicspotsway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "scenicspotsway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "universityway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "universityway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "vacationway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "vacationway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "fourlevelway",
          elementType: "geometry",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "fourlevelway",
          elementType: "geometry.fill",
          stylers: {
            color: "#12223dff",
          },
        },
        {
          featureType: "fourlevelway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "transportationlabel",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "transportationlabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "transportationlabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "transportationlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "educationlabel",
          elementType: "labels",
          stylers: {
            visibility: "on",
          },
        },
        {
          featureType: "educationlabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "educationlabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "educationlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "transportation",
          elementType: "geometry",
          stylers: {
            color: "#113549ff",
          },
        },
        {
          featureType: "airportlabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "airportlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "scenicspotslabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "scenicspotslabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "medicallabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "medicallabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "medicallabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "scenicspotslabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "airportlabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "entertainmentlabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "entertainmentlabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "entertainmentlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "estatelabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "estatelabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "estatelabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "businesstowerlabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "businesstowerlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "businesstowerlabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "companylabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "companylabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "companylabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "governmentlabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "governmentlabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "governmentlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "restaurantlabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "restaurantlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "restaurantlabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "hotellabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "hotellabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "hotellabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "shoppinglabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "shoppinglabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "shoppinglabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "lifeservicelabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "lifeservicelabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "lifeservicelabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "carservicelabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "carservicelabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "carservicelabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "financelabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "financelabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "financelabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "otherlabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "otherlabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "otherlabel",
          elementType: "labels.icon",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "manmade",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "manmade",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "transportation",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "transportation",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "education",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "education",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "medical",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "medical",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
        {
          featureType: "scenicspots",
          elementType: "labels.text.fill",
          stylers: {
            color: "#7b8088ff",
          },
        },
        {
          featureType: "scenicspots",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#ffffff00",
          },
        },
      ],
      zoom: 14,
      positionImg,
      showBoundary: false,
      markers: [],
      center: {
        lng: "",
        lat: "",
      },
      cityName: "",
      id: null, // 公司id
      company: "",
      ruleForm: {
        legal: null,
        legalTel: null,
        safetyDirector: null,
        safetyDirectorTel: null,
        managingMode: null,
        industry: null,
        operatingStatus: null,
        membership: null,
        registrationType: null,
        creditCode: null,
        address: null,
        scaleName: null,
        registrationTypeName: null,
        operatingStatusName: null,
        membershipName: null,
        managingModeName: null,
        industryName: null,
        remark: null,
      },
      pageflag: false,
    };
  },
  computed: {
    queryName() {
      return this.$route.query.name;
    },
  },
  mounted() {
    this.getMarkers();
  },
  methods: {
    handler({ BMap, map }) {
      setTimeout(() => {
        map.centerAndZoom(new BMap.Point(this.center.lng, this.center.lat), 14);
        this.zoom = 14;
        map.setMapStyleV2({ styleJson: this.styleJson });
        map.enableScrollWheelZoom(true);
        this.showBoundary = true;
      }, 300);
    },
    // 获取区域内的公司
    getMarkers() {
      let res = [
        {
          id: "6294d10c867e4d76834a58e9c460b2f1",
          name: "太仓红马机械设备制造有限公司",
          coordinate: "121.11082532753755,31.5746451969521",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 17,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "7d0fa6bd6c3b434e82a9959d6c943218",
          name: "裕克施乐塑料制品（太仓）有限公司",
          coordinate: "116.4133836971231,39.910924547299565",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 8,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "acaa5b08488b48bc9cfc9351e6130e6f",
          name: "太仓力达莱特精密工业有限公司",
          coordinate: "121.05015952254891,31.50965375326678",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 2,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "6761f7fbbae3459f97d28e46719f9848",
          name: "柿沼制冷（苏州）有限公司",
          coordinate: "120.7298897133152,31.3304431437088",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "c85908a5910a42fcb617ed5465806e2e",
          name: "无锡沃德汽车零部件有限公司",
          coordinate: "120.56010027022987,31.545099462884213",
          districtCode: "320205",
          districtName: "锡山区",
          deviceCount: 6,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
      ];
      const data = res[0];
      this.center = {
        lng: data.coordinate.split(",")[0],
        lat: data.coordinate.split(",")[1],
      };
      this.markers = res.map((item) => {
        return {
          id: item.id,
          name: item.name,
          point: {
            lng: item.coordinate.split(",")[0],
            lat: item.coordinate.split(",")[1],
          },
          infoWindowShow: false, // 涉爆粉尘
        };
      });
      this.pageflag = true;
    },
    // 点击坐标
    openinformation(e, obj) {
      this.company = obj.name;
      this.id = obj.id;
      if (this.queryName === "涉爆粉尘") {
        // 父组件调用子组件方法传属性
        this.$nextTick(() => {
          this.$refs.drawerBmInfoRef.init(obj);
        });
        // 百度地图信息窗口打开
        obj.infoWindowShow = false;
      } else if (this.queryName === "抗爆柜") {
        // 百度地图信息窗口打开 危险品仓库
        this.$router.push(`/screen/antiknock?id=${obj.id}&name=${obj.name}`);
      } else if (this.queryName === "可燃气体") {
        // 父组件调用子组件方法传属性
        this.$nextTick(() => {
          this.$refs.drawerBmInfoRef.init(obj);
        });
      }
    },
    closeinformation(e, obj) {
      // 百度地图信息窗口关闭
      obj.infoWindowShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.location-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .location-map {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
}
div ::v-deep .form {
  border-left: 1px solid rgba(1, 137, 202, 0.28);
  border-right: 1px solid rgba(1, 137, 202, 0.28);
  border-top: 1px solid rgba(1, 137, 202, 0.28);
}

//去除组件下边距，设置为0
.el-form-item {
  margin-bottom: 0px;
  border-bottom: 1px solid rgba(1, 137, 202, 0.28);
}

div ::v-deep .el-input__inner {
  background: transparent;
  border: #fff;
  padding: 0px;
  font-size: 12px;
}

//label文字居中，背景色灰色，文字颜色黑色，右边框浅灰色
div ::v-deep .el-form-item__label {
  text-align: center;
  //background: #f0f0f0;
  font-size: 12px;
  padding: 0;
  color: #5bcbff;
  border-right: 1px solid rgba(1, 137, 202, 0.28);
}

//改变input框中文字 居中，在不禁用时背景色使用白色，文字颜色黑色
div ::v-deep .el-input .el-input__inner {
  background: transparent;
  text-align: center;
  color: #ffffff;
}

//
::v-deep .BMap_bottom {
  //display: none;
  display: block;
}

::v-deep .BMap_pop {
  > div,
  > img:nth-child(10) {
    display: none;
    //display: block;
    overflow: unset;
  }

  > div:nth-child(9) {
    display: block;
    overflow: unset;
    width: 710px !important;

    //height: 438px !important;
  }

  > div:nth-child(8) {
    /*display: block;*/
  }

  .BMap_top {
    //height: 0;
    //display: none;
    display: none;
    //background-color: red;
  }

  .BMap_center {
    background: red;
    border: none;
    position: sticky !important;
    height: 100%;
  }
}

::v-deep .BMap_bubble_content {
  box-sizing: content-box;
  // position: absolute;
  left: 16px;
  top: 127px;
  z-index: 10;
  //padding: 20px;
  .info-window {
    background: url("~@/assets/images/cityDetail2.png") no-repeat;
    background-size: 100% 100%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    z-index: 999;
    .top {
      display: flex;
      // align-items: center;
      // background-color: transparent;
      background-color: transparent;
      flex-direction: column;
      align-items: flex-start;
      .enter {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
      }

      .type {
        margin-left: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
        width: 76px;
        height: 26px;
        background: #67b967;
        border-radius: 13px;
      }
      .equipType {
        color: #fff;
      }
    }
    .center {
      margin: 10px 0;
      color: black;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: -6px;
      .left {
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .text {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
        }

        .normal {
          margin-left: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #66c852;
        }

        .pre {
          margin-left: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #fdb628;
        }

        .serious {
          margin-left: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #ed504c;
        }
      }
    }
    .el-divider {
      background: red;
    }
  }

  //自定义滚动条样式
  .info-window::-webkit-scrollbar {
    width: 6px;
    height: 1px;
  }

  .info-window::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }

  .info-window::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background: #ededed;
  }
}

.warningcenter {
  height: 100%;
  width: 100%;
  background-color: #6ac256;
}

.bminfowindow {
  //color: rgb(0, 220, 255);
  font-size: 1vw;
  width: 15vw;
  //background-color: rgb(3, 8, 41);

  p {
    margin: 0;
  }
}

.bm-view {
  width: 100%;
  height: 100%;
}

#allmap {
  width: 100%;
  height: 100%;
}

p {
  margin-left: 5px;
  font-size: 14px;
}
</style>
